<template>
  <div>
    <div>
      <el-button type="primary" @click="newAppointDialog=true">新建预约</el-button>
      <el-button v-if="!showUnfold" @click="showUnfold=true">展开筛选</el-button>
      <el-button v-if="showUnfold" type="info" @click="showUnfold=false">收起筛选</el-button>
    </div>
    <el-collapse-transition>
      <div v-if="showUnfold">
        <div class="search-box">
          <div class="search-list">
            <span class="search-label">预约上课时间</span>
            <el-date-picker
              v-model="searchList.time"
              type="daterange"
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="search-item"
            />
          </div>
          <div class="search-list">
            <span class="search-label">面授课名称</span>
            <el-input v-model="searchList.courseName" placeholder="请输入课程名称" class="search-item" />
          </div>
          <div class="search-list">
            <span class="search-label">预约来源</span>
            <el-select v-model="searchList.source" placeholder="请选择" class="search-item">
              <el-option
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div class="search-box">
          <div class="search-list">
            <span class="search-label">面授课类型</span>
            <el-select v-model="searchList.courseType" placeholder="请选择" class="search-item">
              <el-option
                v-for="item in courseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search-list">
            <span class="search-label">客户姓名</span>
            <el-input v-model="searchList.clientName" placeholder="请输入客户姓名" class="search-item" />
          </div>
          <div class="search-list">
            <span class="search-label">手机号码</span>
            <el-input v-model="searchList.phone" placeholder="请输入手机号码" class="search-item" />
          </div>
        </div>
        <div class="search-box">
          <div class="search-list">
            <span class="search-label">上课地点</span>
            <el-input v-model="searchList.classSite" placeholder="请输入上课地点" class="search-item" />
          </div>
          <div class="search-list">
            <span class="search-label">课节内容</span>
            <el-input v-model="searchList.courseContent" placeholder="请输入课节内容" class="search-item" />
          </div>
          <div class="search-list">
            <span class="search-label">老师姓名</span>
            <el-input v-model="searchList.teacherName" placeholder="请输入老师姓名" class="search-item" />
          </div>
        </div>
      </div>
    </el-collapse-transition>
    <el-tabs v-model="condition" type="card" style="margin-top:30px;" @tab-click="handleClick">
      <el-tab-pane label="全部预约" name="all" />
      <el-tab-pane label="待确认" name="stayConfirm" />
      <el-tab-pane label="待上课" name="stayClass" />
      <el-tab-pane label="已上课" name="alreadyClass" />
      <el-tab-pane label="已取消" name="alreadyCancel" />
    </el-tabs>
    <el-table v-loading="loading" :data="appointForm" border>
      <el-table-column label="学员姓名" prop="name" align="center" />
      <el-table-column label="所属客户" prop="client" align="center" />
      <el-table-column label="手机号" prop="phone" align="center" />
      <el-table-column label="预约上课时间" prop="classTime" align="center" />
      <el-table-column label="状态" prop="status" align="center" />
      <el-table-column label="面授课" prop="faceCourse" align="center" />
      <el-table-column label="课节内容" prop="courseContent" align="center" />
      <el-table-column label="上课地点" prop="classSite" align="center" />
      <el-table-column label="老师" prop="teacher" align="center" />
      <el-table-column label="来源" prop="source" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新建预约弹框 -->
    <el-dialog :visible.sync="newAppointDialog" title="提示" width="700px">
      <el-form
        ref="newAppointForm"
        :model="newAppointForm"
        :rules="newAppointRules"
        label-width="120px"
      >
        <el-form-item label="学员" prop="name">
          <el-autocomplete
            v-model="newAppointForm.name"
            :fetch-suggestions="handleSearchName"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="预约类型">
          <el-radio v-model="newAppointForm.appointType" label="experience">体验课</el-radio>
          <el-radio v-model="newAppointForm.appointType" label="official">正式课</el-radio>
        </el-form-item>
        <el-form-item
          v-if="newAppointForm.appointType=='official'"
          label="购买的面授课程"
          prop="buyFaceCourse"
        >
          <el-autocomplete
            v-model="newAppointForm.buyFaceCourse"
            :fetch-suggestions="handleBuyFaceCourse"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="上课课程" prop="classCourse">
          <el-autocomplete
            v-model="newAppointForm.classCourse"
            :fetch-suggestions="handleClassCourse"
            placeholder="请输入内容"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="上课年月" prop="month">
          <el-date-picker
            v-model="newAppointForm.month"
            type="month"
            placeholder="选择月"
            class="newAppoint-item"
          />
        </el-form-item>
        <el-form-item label="可选日期" prop="date">
          <el-select
            v-model="newAppointForm.date"
            filterable
            placeholder="请选择"
            class="newAppoint-item"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-select
            v-model="newAppointForm.classSite"
            filterable
            placeholder="请选择"
            class="newAppoint-item"
          >
            <el-option
              v-for="item in classSiteOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :rows="4" v-model="newAppointForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newAppointCancel">取 消</el-button>
        <el-button type="primary" @click="newAppointConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: 'all',
      loading: false,
      showUnfold: false,
      newAppointDialog: false,
      searchList: {
        time: '',
        courseName: '',
        source: '',
        courseType: '',
        clientName: '',
        phone: '',
        classSite: '',
        courseContent: '',
        teacherName: ''
      },
      sourceOptions: [
        {
          value: '线上预约',
          label: '线上预约'
        },
        {
          value: '手工预约',
          label: '线上预约'
        }
      ],
      courseTypeOptions: [
        {
          value: '体验课',
          label: '体验课'
        },
        {
          value: '正式课',
          label: '正式课'
        }
      ],
      appointForm: [
        {
          name: '刘德华',
          client: '张天',
          phone: '12315315132',
          classTime: '2019-06-03',
          status: '已上课',
          faceCourse: '语文作文',
          courseContent: '作文提高',
          classSite: '校本部',
          teacher: '王雯',
          source: '手动录入'
        }
      ],
      newAppointForm: {
        name: '',
        appointType: 'experience',
        classCourse: '',
        month: '',
        date: '',
        classSite: '',
        remark: '',
        buyFaceCourse: ''
      },
      dateOptions: [
        {
          value: '2019-06-06',
          label: '2019-06-06'
        }
      ],
      classSiteOptions: [
        {
          value: '校本部',
          label: '校本部'
        }
      ],
      searchNameList: [],
      buyFaceCourseList: [],
      classCourseList: [],
      newAppointRules: {
        name: [{ required: true, message: '请选择学员', trigger: 'blur' }],
        classCourse: [{ required: true, message: '请选择购买的面授课程', trigger: 'change' }],
        buyFaceCourse: [{ required: true, message: '请选择学员', trigger: 'change' }],
        month: [{ required: true, message: '请选择上课年月', trigger: 'change' }],
        date: [{ required: true, message: '请选择可选日期', trigger: 'change' }],
      }
    }
  },
  mounted() {
    // 模拟返回数据
    this.searchNameList = this.loadAllName()
    this.buyFaceCourseList = this.loadAllFaceCourse()
    this.classCourseList = this.loadAllClassCourse()
    // 获取招生学员跳转id
    this.studentId = this.$route.query.studentId
    this.showStudentInfo()
  },
  methods: {
    showStudentInfo() {
      if (this.studentId) {
        // 请求对应数据加载弹框
        this.newAppointDialog = true
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    loadAllName() {
      return [
        {
          value: '刘德华'
        },
        {
          value: '梁朝伟'
        }
      ]
    },
    loadAllFaceCourse() {
      return [
        {
          value: '语文课程',
          content: '快速提升语文作文能力'
        }
      ]
    },
    loadAllClassCourse() {
      return [
        {
          value: '语文课程',
          content: '快速提升语文作文能力'
        },
        {
          value: '数学逻辑',
          content: '快速提升数学逻辑能力'
        }
      ]
    },

    handleSearchName(queryString, cb) {
      var newList = this.searchNameList
      var queryStrings = queryString
      var cbk = cb
      this.searchContent(queryStrings, cbk, newList)
    },
    handleBuyFaceCourse(queryString, cb) {
      var newList = this.buyFaceCourseList
      var queryStrings = queryString
      var cbk = cb
      this.searchContent(queryStrings, cbk, newList)
    },
    handleClassCourse(queryString, cb) {
      var newList = this.classCourseList
      var queryStrings = queryString
      var cbk = cb
      this.searchContent(queryStrings, cbk, newList)
    },

    searchContent(queryStrings, cbk, newList) {
      var results = queryStrings ? newList.filter(this.createStateFilter(queryStrings)) : newList

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cbk(results)
      }, 500 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    newAppointCancel() {
      this.$refs.newAppointForm.resetFields()
      this.newAppointDialog = false
    },
    newAppointConfirm() {
      this.$refs.newAppointForm.validate((valid) => {
        if (valid) {
          this.$refs.newAppointForm.resetFields()
          this.newAppointDialog = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  margin: 20px 0;
  display: flex;
  .search-list {
    margin-right: 20px;
    color: #353535;
    .search-label {
      display: inline-block;
      width: 100px;
      text-align: right;
      margin-right: 10px;
      font-size: 14px;
    }
    .search-item {
      width: 280px;
    }
  }
}
.newAppoint-item {
  width: 300px;
}
</style>
